<template>
  <div class="announcement-container">
    <el-card class="announcement-card">
      <div slot="header" class="card-header">
        <span class="header-title">
          <i class="el-icon-bell"></i>
          最新公告
        </span>
      </div>
      
      <div v-if="announcements.length === 0" class="no-announcement">
        <i class="el-icon-info"></i>
        暂无公告
      </div>
      
      <div v-else class="announcement-list">
        <div 
          v-for="(item, index) in announcements" 
          :key="item.id"
          class="announcement-item"
          @click="showDetail(item)"
        >
          <div class="announcement-title">
            <span class="title-text">{{ item.title }}</span>
            <span class="announcement-time">{{ formatTime(item.createTime) }}</span>
          </div>
          <div class="announcement-content">
            {{ item.content }}
          </div>
        </div>
      </div>
    </el-card>

    <!-- 公告详情对话框 -->
    <el-dialog
      title="公告详情"
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="handleClose"
    >
      <div v-if="currentAnnouncement" class="announcement-detail">
        <h3>{{ currentAnnouncement.title }}</h3>
        <p class="detail-time">发布时间：{{ formatTime(currentAnnouncement.createTime) }}</p>
        <div class="detail-content">{{ currentAnnouncement.content }}</div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'Announcement',
  data() {
    return {
      announcements: [],
      dialogVisible: false,
      currentAnnouncement: null
    }
  },
  mounted() {
    this.loadAnnouncements()
  },
  methods: {
    // 加载公告列表
    async loadAnnouncements() {
      try {
        const response = await axios.get('http://localhost:8081/announcement/list')
        if (response.data.code === 2000) {
          this.announcements = response.data.data || []
        } else {
          this.$message.error('获取公告失败')
        }
      } catch (error) {
        console.error('获取公告失败:', error)
        this.$message.error('获取公告失败')
      }
    },
    
    // 显示公告详情
    showDetail(announcement) {
      this.currentAnnouncement = announcement
      this.dialogVisible = true
    },
    
    // 关闭对话框
    handleClose() {
      this.dialogVisible = false
      this.currentAnnouncement = null
    },
    
    // 格式化时间
    formatTime(timeStr) {
      if (!timeStr) return ''
      const date = new Date(timeStr)
      return date.toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit'
      })
    }
  }
}
</script>

<style scoped>
.announcement-container {
  margin: 20px;
}

.announcement-card {
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-title {
  font-size: 16px;
  font-weight: bold;
  color: #303133;
}

.header-title i {
  margin-right: 8px;
  color: #409EFF;
}

.no-announcement {
  text-align: center;
  color: #909399;
  padding: 40px 0;
}

.no-announcement i {
  font-size: 48px;
  margin-bottom: 16px;
  display: block;
}

.announcement-list {
  max-height: 400px;
  overflow-y: auto;
}

.announcement-item {
  padding: 16px;
  border-bottom: 1px solid #EBEEF5;
  cursor: pointer;
  transition: background-color 0.3s;
}

.announcement-item:hover {
  background-color: #F5F7FA;
}

.announcement-item:last-child {
  border-bottom: none;
}

.announcement-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.title-text {
  font-weight: bold;
  color: #303133;
  flex: 1;
}

.announcement-time {
  font-size: 12px;
  color: #909399;
  margin-left: 16px;
}

.announcement-content {
  color: #606266;
  font-size: 14px;
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.announcement-detail h3 {
  color: #303133;
  margin-bottom: 16px;
}

.detail-time {
  color: #909399;
  font-size: 14px;
  margin-bottom: 16px;
}

.detail-content {
  color: #606266;
  line-height: 1.6;
  white-space: pre-wrap;
}
</style>